import { ref, reactive, shallowRef } from 'vue';
import echarts from '@/echarts';
import { EChartsOption } from 'echarts';
import { EChartsType } from 'echarts/core';
import type { WordCloudChartType } from '../data';
import 'echarts-wordcloud';

import { getHtmlFontPX, handleChartResize } from '@/utils/base';
import ThemeColor from '@/themeColor';

export default function (): WordCloudChartType {
  const chartRef = shallowRef<EChartsType>();
  const container = ref<HTMLDivElement | undefined>();
  const chart = reactive<WordCloudChartType['chart']>({
    selectValue: [],
    initChart,
    resizeChart
  });
  const seriesData = ref<any[]>();

  /**
   * @returns 返回option配置
   */
  function getOption() {
    const option: EChartsOption = {
      // title: {
      //   text: '高频词分布统计',
      //   left: 'center',
      //   top: 6
      // },
      textStyle: {
        color: ThemeColor.chartFontColor
      },

      backgroundColor: 'transparent', // 设置背景透明
      borderRadius: '4px',
      legend: {
        borderRadius: 5 // 圆角
      },
      tooltip: {
        show: true,
        position: 'top',
        formatter: (params: any) => {
          return `${params.data.name}: ${params.data.value}`;
        },
        textStyle: {
          fontSize: getHtmlFontPX(0.75)
        }
      },
      series: []
    };
    return option;
  }

  /**
   * 初始化图表
   * @param container 图表容器id
   */
  function initChart(initData: any): any {
    if (!container.value) return;

    const option = getOption();
    chartRef.value = echarts.init(container.value);
    seriesData.value = initData;
    option.series = [
      {
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '90%',
        height: '90%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-45, 45],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            const colorList = [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ];
            const colorStr = colorList.join(',');
            return `rgb(${colorStr})`;
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#999'
          }
        },
        data: seriesData.value
      }
    ];
    chartRef.value && chartRef.value.setOption(option);
  }

  /**
   * @description 重新set一下resize后的字体 不然会有偏移
   */
  function resetFontSize() {
    const option = getOption();
    delete option.series;
    // 需要重新计算字体不然依旧会有点偏差
    chartRef.value && chartRef.value.setOption(option);
  }

  /**
   * @description 处理图表resize
   */
  function resizeChart() {
    if (chartRef.value) {
      handleChartResize(chartRef.value);
      resetFontSize();
    }
  }

  return {
    chart,
    container,
    chartRef,
    getOption
  };
}
